<%--显示我的购物车--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<div class="col-md-9">
    <div class="data_list">
        <div class="data_list_title"><span class="iconfont icon-gouwuche "></span>&nbsp;我的购物车</div>
        <div class="container-fluid">
            <div class="row" style="padding-top: 20px;">
                <div class="col-md-12">
                    <div class="mytable-content" style="overflow: scroll">
                        <div class="mytable-layout">
                            <div class="mytable-chart">
                                <div class="mytable-chart-title">
                                    <span>购物车(已选<span id="checkNum">0</span>,待支付<span id="CarNum">${carNum}</span>)</span>
                                    <div class="chart-sum">
                                        <span>已选商品不含运费</span>
                                        <strong><em><span></span>0.00</em></strong>
                                        <a class="sub-but" href="">付款</a>
                                    </div>
                                </div>
                                <div class="mytable-chart-content">
                                    <%--                                    头部分--%>
                                    <div class="chart-content-head">
                                        <div class="head-wp">
                                            <div class="head-wp-td mychk">
                                                <div class="check-box">全选</div>
                                            </div>
                                            <div class="head-wp-td myitem">商品信息</div>
                                            <div class="head-wp-td mypro">商品介绍</div>
                                            <div class="head-wp-td myprice">单价</div>
                                            <div class="head-wp-td mynum">数量</div>
                                            <div class="head-wp-td mysum">总金额</div>
                                            <div class="head-wp-td myop">操作</div>
                                        </div>
                                    </div>
                                    <%--                                    商品内容--%>
                                    <div class="food-list">
                                        <c:forEach items="${shopList}" var="shopList">
                                            <div class="food">
                                                <div class="food-box">
                                                    <div class="food-shop">
                                                        <div class="food-shop-info">
                                                            <span class="iconfont icon-dianpu "></span>店铺:<a href="${shopList.shopId}">${shopList.shopName}</a>
                                                        </div>
                                                    </div>
                                                    <c:forEach items="${shopList.foodList}" var="food">
                                                        <div class="head-wp">
                                                            <div class="head-wp-td food-wp mychk">
                                                                <div class="check-box"><input type="checkbox" class="mycheckbox"></div>
                                                            </div>
                                                            <div class="head-wp-td food-wp myitem myitemc">
                                                                <a href="${food.foodId}"><img class="text-img" src="../statics/images/food/${food.foodImg}"></a>
                                                                <a><div><span>${food.foodName}</span></div></a>
                                                            </div>
                                                            <div class="head-wp-td food-wp mypro">${food.foodInfo}</div>
                                                            <div class="head-wp-td food-wp myprice">${food.foodPrice}</div>
                                                            <div class="head-wp-td food-wp mynum">
                                                                <div class="numbox">
                                                                    <div class="numbox-box">
                                                                        <div class="numbox-box-box">
                                                                            <a href="" style="left: 0;">-</a><input type="text" value="${food.foodNum}"><a href="" style="right: 0;">+</a>
                                                                        </div>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                            <div class="head-wp-td food-wp mysum">${food.money}</div>
                                                            <div class="head-wp-td food-wp myop"><a href="${food.foodId}">移除</a></div>
                                                        </div>
                                                    </c:forEach>
                                                </div>
                                            </div>
                                        </c:forEach>
                                    </div>
                                </div>
                                <div class="myatble-chart-bottom"></div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<style>
    .food{
        margin-top: 15px;
        margin-bottom: 15px;
    }
    .food-box ul{
        padding-left: 0;
        list-style: none;
    }
    .myitemc {
        display: flex;
    }

    .myitemc img {
        width: 40px;
        height: 40px;
    }

    .mycheckbox {
        width: 55px;
        display: block;
        position: relative;
        top: 14px;
        right: 0;
    }

    .food-wp {
        height: 50px;
        overflow: hidden;
        line-height: 16px;
        padding-left: 5px;
    }
    .numbox{
        width: 100%;
        height: 35px;
        line-height: 15px;
        border: 1px solid ;
        text-align: center;
        padding: 4px 0;
        background-color: #fff;
        background-position: -75px -375px;
        position: relative;
        z-index: 2;
        border-color: #efbba9;
        color: #6c6c6c;
    }
    .numbox-box-box{
        width: 100%;
        list-style: none;
        height: 25px;
        overflow: hidden;
        position: relative;
        z-index: 1;
    }
    .numbox-box-box a{
        float: left;
        display: block;
        height: 23px;
        width: 17px;
        border: 1px solid #e5e5e5;
        border-top-color: rgb(229, 229, 229);
        border-right-color: rgb(229, 229, 229);
        border-bottom-color: rgb(229, 229, 229);
        border-left-color: rgb(229, 229, 229);
        background: #f0f0f0;
        text-align: center;
        line-height: 25px;
        color: #444;
        position: absolute;
    }
    .numbox-box-box input{
        color: #6c6c6c;
        width: 34px;
        height: 25px;
        line-height: 15px;
        border: 1px solid #aaa;
        border-top-color: rgb(170, 170, 170);
        border-right-color: rgb(170, 170, 170);
        border-bottom-color: rgb(170, 170, 170);
        border-left-color: rgb(170, 170, 170);
        text-align: center;
        padding: 4px 0;
        background-color: #fff;
        background-position: -75px -375px;
        position: absolute;
        z-index: 2;
        left: 18px;
    }
    .mytable-layout {
        width: 100%;
        font: 12px/1.5 tahoma, arial, 'Hiragino Sans GB', '\5b8b\4f53', sans-serif;
    }

    .mytable-chart {
        min-height: 400px;
        background-color: #fff;
        border-radius: 24px;
        overflow: hidden;
    }

    .mytable-chart-title {
        overflow: hidden;
        font-size: 12px;
        position: relative;
        height: 72px;
        padding: 0 18px;
        border-bottom: 1px solid #e6e6e6;
    }

    .mytable-chart-title span {
        overflow: hidden;
        color: #000;
        font-size: 18px;
        font-weight: 600;
        line-height: 72px;
    }

    .chart-sum {
        position: absolute;
        right: 18px;
        top: 0;
        height: 72px;
        line-height: 72px;
        font-size: 14px;
    }

    .chart-sum span {
        position: relative;
        top: -2px;
    }

    .chart-sum strong {
        font-family: Arial, Verdana;
        font-weight: 400;
        margin-right: 12px;
        font-size: 22px;
        color: #FF5000;
    }

    .chart-sum em {
        font-family: Verdana, Arial;
        padding-left: 2px;
        font-weight: 500;
    }

    .sub-but {
        background: #aaa;
        color: #fff;
        /*不允许购买*/
        /*cursor: not-allowed;*/
        cursor: pointer;
        display: inline-block;
        width: 74px;
        height: 42px;
        line-height: 42px;
        border-radius: 21px;
        text-align: center;
        text-decoration: none;
        position: relative;
        top: -2px;
        font-size: 16px;
    }

    .mytable-chart-content {
        min-height: 210px;
    }

    .chart-content-head {
        overflow: hidden;
        height: 50px;
        line-height: 50px;
        color: #3c3c3c;
        font-weight: 700;
    }

    .head-wp {
        width: 100%;
        margin: 0 auto;
        line-height: 50px;
        color: #3c3c3c;
        font-weight: 700;
    }

    .check-box {
        position: absolute;
        left: 8px;
        top: 0;
        font-size: 13px;
        cursor: pointer;
    }

    .mychk {
        font-size: 12px;
        text-align: left;
        position: relative;
        height: 50px;
        width: 10%;
    }

    .head-wp-td {
        float: left;
        text-align: center;
    }

    .myitem {
        width: 30%;
    }

    .mypro {
        width: 20%;
    }

    .myprice {
        width: 10%;
    }

    .mynum {
        width: 10%;
    }

    .mysum {
        width: 10%;
    }

    .myop {
        width: 10%;
    }

    .food-shop {
        position: relative;
        height: 38px;
        background: #fff;
        overflow: hidden;
    }

    .food-shop-info {
        position: relative;
        z-index: 2;
        line-height: 38px;
        padding-left: 15px;
    }

    .food-shop-info a {
        color: #3c3c3c;
        text-decoration: none;
    }

    .food-shop-info span {
        width: 16px;
        height: 16px;
        background-position: -20px -105px;
    }


    .food-box {
        overflow: hidden;
        border-width: 1px;
        border-style: solid;
        border-color: red;
        margin-top: 5px;
        margin-bottom: 5px;
        border-radius: 5px;
    }


    .promos-box ul {
        list-style: none;
        margin: 0;
        padding: 0;
        display: flex;
    }

    .promos-box ul li {
        white-space: nowrap;
        margin: 0;
        padding-right: 2px;
        padding-left: 2px;
    }
</style>